<template>
  <div class="all">
    <el-container style="width: 100%;">
      <el-header style="background-color: #1890FF;height: 70px;">
<!--        <h1>头部</h1>-->
      <Head></Head>
      </el-header>
      <el-container style="height: 625px;">
          <el-aside style="width: auto;">



            <vue-scroll :ops="ops">
              <div class="collapse" @click="collClick">
                <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
              </div>
            <el-menu
                default-active="1-4-1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :collapse="isCollapse"
                active-text-color="#4676C6"
                :unique-opened="true"
                router
            >
              <template v-for="item in menuList" >
                <template v-if="item.subs">
                  <el-submenu :index="item.index" :key="item.index" style="text-align: left">
                    <template slot="title">
                      <i :class="item.icon"></i>
                      <span slot="title">{{ item.title }}</span>
                    </template>
                    <template v-for="two in item.subs">
                      <el-submenu v-if="two.subs" :index="two.index" :key="two.index" >

                        <span slot="title" style="padding-left: 5px;"><i :class="two.icon"></i>{{ two.title }}</span>
                        <!-- 三级菜单 -->
                        <el-menu-item v-for="three in two.subs" :index="three.index" :key="three.index">

                          <span style="padding-left: 5px;"><i :class="three.icon"></i>{{ three.title }}</span>
                        </el-menu-item
                        >
                      </el-submenu>

                      <!-- 二级菜单 -->
                      <el-menu-item v-else :index="two.index" :key="two.index" >

                       <span style="padding-left: 5px;"><i :class="two.icon"></i>{{two.title}}</span>
                      </el-menu-item>
                    </template>
                  </el-submenu>
                </template>

                <!-- 一级菜单 -->
                <template v-else>
                  <el-menu-item :index="item.index" :key="item.index" style="text-align: left">

                    <span slot="title"><i :class="item.icon"></i>{{ item.title }}</span>
                  </el-menu-item>
                </template>
              </template>
            </el-menu>
            </vue-scroll>
          </el-aside>

          <el-main style="background-color:#CEC3C3">
<!--            <transition name="fade" mode="out-in">-->
<!--            <h1>主要部分展示</h1>-->
              <router-view></router-view>
<!--            </transition>-->
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
    *{padding:0px;margin: 0px;}
    #app{margin-top: 0px;}
    .all{height: 670px;}
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 240px;
      min-height: 400px;
    }

</style>

<script>
import Head from '@/components/pageManage/headPage/header'
export default {
  components:{
    Head,
  },
  data() {
    return {
      isCollapse: false,
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: '#CEC3C3',
        },
      },
      menuList: [
        {
          icon: "el-icon-s-home",
          index: "/layout",
          title: "主页",
        },
        {
           icon: "el-icon-s-home",
           index: "devices",
           title: "设备",
           subs: [{
             icon: "el-icon-s-management",
             index: "/deviceManage",
             title: "设备管理",
             },
             {
               icon: "el-icon-setting",
               index: "deviceSet",
               title: "设备设置",
               subs: [
                 {
                   icon: "el-icon-setting",
                   index: "/hello",
                   title: "设备告警设置"
                 },
                 {
                   icon: "",
                   index: "/right",
                   title: "设备图形组态"
                 }
               ]
             },
             {
               index: "deviceMonitor",
               title: "设备监控",
               subs: [
                 {
                   icon: "",
                   index: "/login",
                   title: "设备图形"
                 },
                 {
                   icon: "",
                   index: "/login",
                   title: "实时数据"
                 },
                 {
                   icon: "",
                   index: "/right",
                   title: "抄表数据"
                 },
                 {
                   icon: "",
                   index: "/right",
                   title: "历史数据"
                 },
                 {
                   icon: "",
                   index: "/right",
                   title: "谐波分析"
                 }
               ]
             },
             {
               index: "videoMonitor",
               title: "视频监控",
               subs: [
                 {
                   icon: "",
                   index: "",
                   title: "视频监控设置"
                 },
                 {
                   icon: "",
                   index: "",
                   title: "视频监控预览"
                 },
                 {
                   icon: "el-icon-setting",
                   index: "/right",
                   title: "视频监控设置"
                 },
               ]
             }]

        },
        {
          icon: "el-icon-s-home",
          index: "devices",
          title: "能耗单元",
          name: "device",
          subs: [
            {
              icon: "el-icon-s-management",
              index: "",
              title: "能耗单元数据项管理"
            },
            {
              icon: "el-icon-setting",
              index: "",
              title: "能耗单元设置"
            },
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "单一能耗单元浏览"
            },
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "统计分析"
            },
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "运行分析"
            },
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "经济分析"
            },
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "能耗相关性分析"
            }
          ]
        },
        {
          icon: "el-icon-s-home",
          index: "devices",
          title: "告警中心",
          name: "device",
          subs: [
            {
              icon: "",
              index: "",
              title: "设备告警"
            },
            {
              icon: "",
              index: "",
              title: "离线告警"
            }
          ]
        },
        {
          icon: "el-icon-s-marketing",
          index: "devices",
          title: "报表服务",
          name: "device",
          subs: [
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "设备报表"
            },
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "能耗单元报表"
            },
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "自定义报表管理"
            },
            {
              icon: "el-icon-s-marketing",
              index: "",
              title: "自定义报表展示"
            }
          ]
        },
        {
          icon: "el-icon-s-management",
          index: "devices",
          title: "运检管理",
          name: "device",
          subs: [
            {
              icon: "el-icon-s-management",
              index: "",
              title: "巡视管理",
              subs: [
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "巡视管理"
                },
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "巡视周期管理"
                },
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "巡视作业文本管理"
                },
              ]
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "缺陷管理"
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "试验管理",
              subs: [
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "试验作业文本管理"
                },
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "试验周期管理"
                },
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "试验管理"
                },
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "试验报告模板管理"
                },
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "试验报告管理"
                },
              ]
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "检修管理",
              subs: [
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "检修周期管理"
                },
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "检修管理"
                },
              ]
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "工作票管理",
              subs: [
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "工作票管理"
                },
                {
                  icon: "el-icon-s-management",
                  index: "",
                  title: "工作票模板管理"
                },

              ]
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "工作单管理"
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "审核管理"
            },
          ]
        },
        {
          icon: "el-icon-s-management",
          index: "devices",
          title: "系统管理",
          name: "device",
          subs: [
            {
              icon: "el-icon-s-management",
              index: "",
              title: "字典管理"
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "组织机构管理"
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "设备模型管理"
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "能耗单元模型管理"
            },
            {
              icon: "el-icon-s-management",
              index: "",
              title: "角色管理"
            },
            {
              icon: "el-icon-user",
              index: "",
              title: "用户管理"
            },
            {
              icon: "",
              index: "",
              title: "模块管理"
            },
            {
              icon: "",
              index: "",
              title: "调度任务管理",
              subs: [
                {
                  icon: "",
                  index: "",
                  title: "调度任务历史"
                },
                {
                  icon: "",
                  index: "",
                  title: "调度任务"
                },
              ]
            },
            {
              icon: "",
              index: "",
              title: "运维管理",
              subs: [
                {
                  icon: "",
                  index: "",
                  title: "操作日志"
                },
                {
                  icon: "",
                  index: "",
                  title: "App版本管理"
                },
              ]
            },
            {
              icon: "",
              index: "",
              title: "首页和皮肤设置"
            },
          ]
        },
        {
          icon: "el-icon-s-home",
          index: "devices",
          title: "前置系统",
          name: "device"
        },

      ],
    }


  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    collClick() {
      this.isCollapse = !this.isCollapse;
    }
  }
}
</script>